<template>
  <section class="m-goods-base">
    <!-- 下架图标 -->
    <div class="soldout" v-if="isSoldOut"></div>

    <!-- 轮播图 -->
    <yd-slider autoplay="0">
      <yd-slider-item v-for="(photo, index) in goodsInfo.goodsMainPhotoList" :key="index">
        <a href="javascript:;">
          <img v-lazy="photo">
        </a>
      </yd-slider-item>
    </yd-slider>

    <!-- 简介 -->
    <div class="u-ct goods-tit">
      <p class="tit">{{goodsInfo.goodsName}}</p>
      <p class="sale">价格<span slot="left"><strong class="price-old"><i>￥</i>{{goodsInfo.goodsMainCurPrice | currency}}</strong></span><span class="old-price">原价</span></p>
      <p class="price"><span slot="left"><strong><i>￥</i>{{goodsInfo.goodsMainCurPrice | currency}}</strong></span><span class="now-price">现价</span></p>
    </div>
    <div class="u-min-gap"></div>
    <div class="u-min-gap"></div>
    <!-- 颜色 -->
    <yd-cell-item class="u-ct" arrow @click.native="$emit('emit-buy')">
      <span slot="left">选择颜色 尺寸</span>
    </yd-cell-item>
    <div class="u-min-gap"></div>
    <!-- 商品信息 -->
    <div class="goods-common">
      <div class="u-ct hd">
        <yd-icon size=".3rem"></yd-icon>
        <span>商品信息</span>
      </div>
      <div class="u-ct ct">
        <p class="null"><span>商品名称：</span>{{goodsInfo.goodsName}}</p>
        <p class="null"><span>商品货号：</span>{{goodsInfo.goodsSerial}}</p>
        <p class="null"><span>商品库存：</span>{{goodsInfo.goodsInventory}}</p>
      </div>
    </div>
    <!-- 商品详情 -->
    <div class="goods-common">
      <div class="u-ct hd">
        <yd-icon size=".3rem"></yd-icon>
        <span>商品详情</span>
      </div>
      <div class="u-ct ct">
        <detail :goodsDetail = "goodsInfo.goodsDetails"></detail>
      </div>
    </div>
    <div class="u-min-gap"></div>
  </section>
</template>

<script>
  import Detail from './detail'

  export default {
    props: {
      goodsId: [String],
      goodsInfo: [Object]
    },
    data() {
      return {
        isSoldOut: false
      }
    },
    methods: {
      onSoldOut() {
        this.isSoldOut = true
      }
    },
    components: {
      Detail
    }
  }
</script>

<style lang="scss">
  @import '../../scss/_flex.scss';
  .m-goods-base {
    position: relative;
    .soldout {
      position: absolute;
      right: .2rem;
      top: 8rem;
      width: 1.8rem;
      height: 1.6rem;
      z-index: 10;
      background: url(./img/icon_soldout.png) no-repeat center center;
      background-size: cover;
    }
    .yd-slider {
      height: 6.2rem;
    }
    .yd-slider-pagination {
      display: block;
      padding-right: .2rem;
      text-align: right;
    }
    .u-ct {
      padding: 0 .24rem;
      background: #fff;
    }
    .goods-tit {
      .tit {
        padding: .1rem 0;
        font-size: .26rem;
        white-space: pre-wrap;
      }
      .price {
        font-size: 0.35rem;
      }
      .price-old {
        text-decoration: line-through;
      }
      .sale {
        padding: .1rem 0;
        color: #666;
      }
      .old-price {
        padding-left: 0.2rem;
      }
      .now-price {
        margin-left: 0.1rem;
        display: inline-block;
        border: 1px solid #f58f00;
        color: #f58f00;
        border-radius: 5px;
        padding: 0.05rem;
        font-size: 0.2rem;
      }
    }
    .goods-price {
      strong {
        font-size: .32rem;
        color: #f00385;
      }
      i {
        font-size: .2rem;
      }
    }
    .yd-cell-left {
      color: #333;
    }
    .goods-common {
      .hd {
        height: .64rem;
        line-height: .64rem;
        font-size: .24rem;
        color: #666;
        border-bottom: 1px solid #eee;
        i {
          position: relative;
          top: 1px;
        }
      }
      .ft {
        padding: .24rem;
        border-top: 1px solid #eee;
        .yd-btn-block {
          margin-top: 0;
        }
      }
      .null {
        padding: .15rem 0;
        color: #999;
      }
    }
    .goods-store {
      @include flex(start);
      padding: .26rem .24rem;
      margin-bottom: .2rem;
      .img-box {
        width: 1.1rem;
        height: 1.1rem;
        overflow: hidden;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .text-bd {
        padding-left: .2rem;
        line-height: .42rem;
        .tit {
          font-size: .24rem;
        }
        .area {
          color: #999;
        }
      }
    }
    .yd-popup-content {
      header {
        height: 1rem;
        line-height: 1rem;
        font-size: .3rem;
        text-align: center;
        border-bottom: 1px solid #eee;
      }
      button {
        width: 100%;
        height: .88rem;
        background: #f00385;
        color: #fff;
        font-size: .3rem;
      }
      .rule-item {
        padding: .2rem;
        border-bottom: 1px solid #eee;
        p {
          color: #666;
          padding-bottom: .1rem;
        }
        em {
          font-size: .3rem;
        }
      }
      .price-item {
        @include flex();
        line-height: 1rem;
        padding: 0 .2rem;
        border-bottom: 1px solid #eee;
        font-size: .28rem;
      }
      span {
        color: #666;
      }
      em {
        color: #f00385;
      }
    }
  }
</style>